<template>
  <view>
    <z-paging
      ref="paging"
      v-model="dataList"
      bg-color="#fff"
      auto-show-system-loading
      @query="getList"
    >
      <view slot="top">
        <view class="head-bg">
          <view class="flex">
            <view>
              <view class="sum-flex">
                <image
                  class="card-logo"
                  src="../../static/images/cash/7.png"
                ></image>
                <view>收益(已结算)</view>
              </view>
              <view class="sum">¥ {{ popularizeCenterData.totalAmount }}</view>
            </view>
            <!-- <view class="btn" @click="pageTo('/subPages/promotion/withdrawal')"
              >提现</view
            > -->
          </view>
          <view class="price">
            <view>
              <view>{{ popularizeCenterData.pendingSettlement }}</view>
              <view class="mt-16">待结算</view>
            </view>
            <view>
              <view>{{ popularizeCenterData.availableForWithdrawal }}</view>
              <view class="mt-16">可提现</view>
            </view>
            <view>
              <view>{{ popularizeCenterData.withdrawn }}</view>
              <view class="mt-16">已提现</view>
            </view>
          </view>
        </view>
        <view class="content-text">
          <view
            class="content-flex"
            @click="pageTo('/subPages/promotion/myClient')"
          >
            <image
              class="content-logo"
              src="../../static/images/cash/8.png"
            ></image>
            <view>我的客户</view>
          </view>

          <view
            class="content-flex"
            @click="pageTo('/subPages/promotion/withdrawDetails')"
          >
            <image
              class="content-logo"
              src="../../static/images/cash/9.png"
            ></image>
            <view>提现明细</view>
          </view>
        </view>
        <view class="segmented">
          <SegmentedControl
            class="control"
            :current="current"
            :style="{ height: '88rpx' }"
            :values="items"
            :style-type="styleType"
            :active-color="activeColor"
            @clickItem="onClickItem"
          />
        </view>
      </view>
      <view class="list">
        <view class="list-flex" v-for="(item, index) in dataList" :key="index">
          <view>
            <view class="list-title"
              >{{ item.typeName }}
              <span style="color: #0000d6; margin-left: 10rpx">{{
                item.statusName
              }}</span></view
            >
            <view class="list-title"> ID:{{ item.userId }} </view>
            <view class="list-title"> 商品:{{ item.goodName }} </view>
          </view>

          <view>
            <view class="list-pirce">+{{ item.amount }}元</view>
            <view class="list-time">{{ item.createTime.slice(0, 16) }}</view>
          </view>
        </view>
      </view>
      <view slot="empty">
        <Empty />
      </view>
    </z-paging>
  </view>
</template>

<script>
import mineApi from "@/api/mine";
import { formatDate } from "@/utils/index";
import SegmentedControl from "@/components/segmented-control/index.vue";

export default {
  name: "ExtensionCenter",
  components: {
    SegmentedControl,
  },
  data() {
    return {
      items: ["近7天", "近30天", "近3个月"],
      current: 0,
      activeColor: "#000",
      styleType: "text",
      popularizeCenterData: {},
      dataList: [],
    };
  },
  onLoad(options) {},
  onShow() {
    this.getPopularizeCenter();
  },
  methods: {
    getList(pageNum, pageSize) {
      let date = Date.now();
      let data;
      if (this.current == 0) {
        data = {
          pageNum,
          pageSize,
          createStartTime: formatDate(date - 1000 * 60 * 60 * 24 * 7),
          dataEndTime: formatDate(date),
        };
      } else if (this.current == 1) {
        data = {
          pageNum,
          pageSize,
          createStartTime: formatDate(date - 1000 * 60 * 60 * 24 * 30),
          dataEndTime: formatDate(date),
        };
      } else if (this.current == 2) {
        data = {
          pageNum,
          pageSize,
          createStartTime: formatDate(date - 1000 * 60 * 60 * 24 * 90),
          dataEndTime: formatDate(date),
        };
      }
      mineApi
        .getRoyaltyRecord(data)
        .then((res) => {
          if (res.code == 200) {
            this.$refs.paging.complete(res.rows);
          }
        })
        .catch(() => {
          this.$refs.paging.complete(false);
        });
    },
    getPopularizeCenter() {
      mineApi.getPopularizeCenter().then((res) => {
        if (res.code == 200) {
          this.popularizeCenterData = res.data[0];
        }
      });
    },
    pageTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    onClickItem(e) {
      this.current = e.currentIndex;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.head-bg {
  background-image: url("https://lm.bwmonlinestore.com/prod-api/profile/upload/2025/01/07/extend_bg_20250107185535A022.png");
  /* 网络路径图片 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat;
  margin: 0rpx 20rpx 0rpx 20rpx;

  // padding: 40rpx 24rpx 0 24rpx;
  .sum-flex {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-family: "HarmonyOS Sans SC";
    font-size: 26rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .sum {
    color: #ffffff;
    font-family: "HarmonyOS Sans SC";
    font-size: 50rpx;
    font-style: normal;
    font-weight: 500;
    line-height: 50rpx;
    margin-top: 20rpx;
  }
}

.card-logo {
  width: 30rpx;
  height: 30rpx;
  margin-right: 16rpx;
}

.btn {
  width: 164rpx;
  height: 80rpx;
  flex-shrink: 0;
  border-radius: 16rpx;
  background: #fff;
  color: #ff4254;
  font-family: "PingFang SC";
  font-size: 30rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 24rpx 0 24rpx;
}

.price {
  display: flex;
  justify-content: space-around;
  color: #ffffff;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 32rpx;
  margin-top: 76rpx;
  padding-bottom: 10rpx;
}

.content-text {
  display: flex;
  justify-content: space-around;
  // width: 702rpx;
  height: 110rpx;
  flex-shrink: 0;
  border-radius: 0 0 36rpx 36rpx;
  background: linear-gradient(289deg, #ffd2da 0%, #fff2f2 100%);
  margin-top: 0rpx;
  margin: 0rpx 20rpx 0rpx 20rpx;
}

.mt-16 {
  margin-top: 16rpx;
}

.content-logo {
  width: 40rpx;
  height: 40rpx;
  margin-right: 14rpx;
}

.content-flex {
  display: flex;
  align-items: center;
}

.segmented {
  width: 100%;
  box-shadow: 0 4rpx 6rpx 0 #00000026;
  margin-top: 20rpx;
}

.segmented > .uni-segmented-control {
  height: 88rpx !important;
}

/* 假设你的组件类名为 .uni-segmented-control */
.segmented .uni-segmented-control .uni-sc-item {
  color: grey !important;
  /* 未激活的颜色 */
}

.list {
  margin-top: 10rpx;
}

.list-flex {
  margin: 30rpx 30rpx 0rpx 30rpx;
  padding-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #efefef;

  .list-title {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 26rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 0.9;
  }

  .list-time {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 20rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0.5;
    margin-top: 8rpx;
  }

  .list-pirce {
    color: #000000;
    text-align: right;
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 0.9;
  }
}
</style>
